<template>
  <div id="exam" class="container">
      <h2>欢迎进入考试管理界面</h2>
          <form>
  <div class="form-group">
    <div>
      <input type="text" class="form-control" v-model='keywords' id="inputPassword3" placeholder="请输入考试科目">
      <button type="button" class="btn btn-default" @click='search'>搜索</button>
     <button type="button" class="btn btn-info" @click='show=true'>添加考试</button>
  </div>
    <form class="form-horizontal add" v-show="show" >
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">请输入考试科目</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputEmail3" v-model='name' placeholder="请输入考试科目">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">请输入考试时间</label>
    <div class="col-sm-10">
      <input type="date" class="form-control" v-model='time' id="inputPassword3" placeholder="请输入考试时间">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="button" class="btn btn-default" @click='updat'>修改</button>
      <button type="button" class="btn btn-default" @click='add'>提交</button>
    </div>
  </div>
</form>
  </div>
  
</form>


      <table class="table table-bordered" v-show="!show">
           <tr >
               <th>序号</th>
               <th>考试科目</th>
               <th>考试时间</th>
               <th>操作</th>
           </tr>
           <tr v-for='(item,index) in exam_list' :key='index'>
               <td>{{index+1}}</td>
               <td>{{item.name}}</td>
               <td>{{item.time}}</td>
               <td> <button type="button" class="btn btn-primary" @click="update(index)">修改</button>
               <button type="button" class="btn btn-danger" @click='del(index)'>删除</button>
                </td>
           </tr>
          
        </table>
  
  </div>
</template>

<script>
export default {
  data(){
    return{
      exam_list:[{id:0,name:'java考试',time:'2021/7/11'},
      {id:1,name:'web考试',time:'2021-7-12'},
      {id:2,name:'python考试',time:'2021-7-13'},
      {id:3,name:'计算机原理考试',time:'2021-7-14'},
      {id:4,name:'计算机网络考试',time:'2021-7-15'}],
      show:false,
      name:'',
      time:'',
      keywords:'',
      search_list:[],
      new_list:[],
      index:''
    }
  },
  methods:{
    update(index){
      this.show=true;
      // console.log(this.exam_list[index]);
      this.name=this.exam_list[index].name;
      this.time=this.exam_list[index].time;
      return this.index=index;
    },
    updat(){ 
      if(this.time.trim()==""){
        alert('考试时间不能为空')
        return
      }
       this.exam_list[this.index].name=this.name;
        this.exam_list[this.index].time=this.time;
      this.new_list=this.exam_list.splice(this.index,1,this.exam_list[this.index]);
      this.exam_list=this.new_list;
      this.show=false;

    },
    del(index){
      this.exam_list.splice(index,1);
      alert("删除成功")
    },
    add(){ 
      var obj={
          name:this.name,
          time:this.time
      }
      if(this.name.trim()==""){
        alert('考试科目不能为空')
        return
      }
      if(this.time.trim()==""){
        alert('考试时间不能为空')
        return
      }
      this.exam_list.push(obj)
      this.show=false;
    },
    search(){
      this.exam_list.forEach(item => {
        if(!item.name.indexOf(this.keywords)){
          this.search_list.push(item);
        } 
      });
      this.exam_list=this.search_list;
    }
  }
}
</script>

<style>
 #exam tr,th,td{
   border: 1px solid #ddd;
   text-align: center;
   height: 40px;
 }
  #exam .btn-primary{
    margin-right: 5px;
  }
  #exam .form-control{
    width: 300px;
    display: inline-block;
    margin-right: 10px;
  }
  #exam .btn-info{
    margin-left: 10px;
  }
  #exam .add{
    margin-top: 20px;
  }
</style>